<template>
  <div class="container">
    <h1>Base64 图片转换工具</h1>
    <el-tabs v-model="activeTab">
      <!-- 图片转Base64标签页 -->
      <el-tab-pane label="图片转Base64" name="toBase64">
        <div class="conversion-panel">
          <div class="upload-component">
            <el-upload
              class="upload-area"
              drag
              action=""
              :auto-upload="false"
              :show-file-list="false"
              @change="handleImageUpload"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                拖拽图片到此处或 <em>点击上传</em>
              </div>
            </el-upload>
          </div>
          <div v-if="imageBase64" class="result-panel">
            <h3>Base64编码结果：</h3>
            <div class="result-content">
              <el-input
                type="textarea"
                v-model="imageBase64"
                :rows="6"
                readonly
              />
              <el-button type="primary" @click="copyBase64" class="action-button">
                复制Base64编码
              </el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <!-- Base64转图片标签页 -->
      <el-tab-pane label="Base64转图片" name="toImage">
        <div class="conversion-panel">
          <div class="input-area">
            <el-input
              type="textarea"
              v-model="base64Input"
              :rows="6"
              placeholder="请输入Base64编码"
            />
            <el-button
              type="primary"
              @click="convertToImage"
              class="action-button"
              :disabled="!base64Input"
            >
              转换为图片
            </el-button>
          </div>
          <div v-if="previewImage" class="preview-panel">
            <h3>图片预览：</h3>
            <div class="preview-content">
              <img :src="previewImage" alt="预览图片" class="preview-image" />
              <el-button type="primary" @click="downloadImage" class="action-button">
                下载图片
              </el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const imageBase64 = ref('')
const base64Input = ref('')
const previewImage = ref('')
const activeTab = ref('toBase64')

// 处理图片上传
const handleImageUpload = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    imageBase64.value = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

// 复制Base64编码
const copyBase64 = async () => {
  try {
    await navigator.clipboard.writeText(imageBase64.value)
    ElMessage.success('Base64编码已复制到剪贴板')
  } catch (err) {
    ElMessage.error('复制失败，请手动复制')
  }
}

// 转换Base64为图片
const convertToImage = () => {
  try {
    // 验证Base64格式
    if (!base64Input.value.startsWith('data:image')) {
      previewImage.value = 'data:image/png;base64,' + base64Input.value
    } else {
      previewImage.value = base64Input.value
    }
  } catch (err) {
    ElMessage.error('无效的Base64编码')
  }
}

// 下载图片
const downloadImage = () => {
  const link = document.createElement('a')
  link.href = previewImage.value
  link.download = 'converted-image.png'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
</script>

<style scoped>
.container {
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #409EFF;
}

.conversion-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.upload-area {
  width: 100%;
}

.result-panel,
.preview-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.result-content,
.preview-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-image {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: white;
  padding: 10px;
}

.input-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-button {
  align-self: flex-start;
}

:deep(.el-upload-dragger) {
  width: 100%;
  height: 200px;
}

:deep(.el-icon--upload) {
  margin-top: 40px;
}

:deep(.el-tabs__nav-wrap::after) {
  display: none;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  text-align: left;
}

:deep(.el-tabs__item.is-active) {
  color: #409EFF;
}
</style>